<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000" ></canvas>
</body>
<script>
     var canvas=document.getElementById("myCanvas")
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();   /*存储路径点*/
    var paint;
    var context=canvas.getContext('2d');
    function addClick(x,y,dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    function redraw(){
          context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容
          context.strokeStyle = "#000000";//设置线条颜色
        context.lineJoin = "round";//当两条线条交汇时，创建圆形边角
         context.lineWidth = 5;//线条粗细

         for(var i=0; i < clickX.length; i++) {
                context.beginPath();//开始一条路径，或重置当前的路径
                if(clickDrag[i] && i){
                       context.moveTo(clickX[i-1], clickY[i-1]);
                      }else{
                        context.moveTo(clickX[i]-1, clickY[i]);
                }
                 context.lineTo(clickX[i], clickY[i]);
                 context.closePath();
                 context.stroke();//绘制路径
              }
         }
    canvas.onmousedown=function(e){
          var mouseX = e.pageX - this.offsetLeft;
         var mouseY = e.pageY - this.offsetTop;
          paint = true;
          addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
         };
    canvas.onmousemove=function(e){
          if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
          }
         };
    canvas.onmouseup=function(e){
          paint = false;
         };
    canvas.mouseleave=function(e){
         paint = false;
         };
</script>
</html>